<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "首页"
  }
}
</route>

<script lang="ts" setup>
defineOptions({
  nameTs: 'Home',
})
const value = ref<string>('')
// 获取屏幕边界到安全区域距离
let safeAreaInsets
let systemInfo

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
      top: systemInfo.safeArea.top,
      right: systemInfo.windowWidth - systemInfo.safeArea.right,
      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
      left: systemInfo.safeArea.left,
    }
  : null
// #endif

// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif

// 测试 uni API 自动引入
onLoad(() => {
  console.log('home')
})
function handleChange(event) {
  console.log(event)
}
console.log('index')
function closeDialog() {
  console.log('closeDialog')
}
</script>

<template>
  <wd-overlay :show="true">
    <fg-add-category-location @close-dialog="closeDialog" />
  </wd-overlay>
  <view class="px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
    <view class="mb-6 text-center">
      <view class="text-3xl font-bold">
        物品总览
      </view>
      <view class="text-slate-500">
        您共有 <span class="text-sky-500 font-bold">128</span> 件物品
      </view>
    </view>
    <view class="relative mb-6">
      <wd-input v-model="value" type="text" placeholder="请输入用户名" size="large" class="overflow-hidden border-2 border-sky-500 border-transparent rounded-full bg-white indent-1 shadow-sm after:hidden hover:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500" @input="handleChange">
        <template #prefix>
          <view class="fa fa-search text-slate-400 hover:color-sky" />
        </template>
      </wd-input>
    </view>
    <view class="mb-6 flex-grow">
      <view class="mb-3 text-center text-lg font-bold">
        最近添加
      </view>
      <view class="space-y-3">
        <view class="flex items-center border rounded-xl bg-white p-3 shadow-sm space-x-3">
          <wd-img src="https://picsum.photos/seed/docs/80/80" alt="item" class="h-16 w-16 rounded-lg object-cover" />
          <view class="flex-1">
            <view class="font-bold">
              房产证
            </view>
            <view class="flex items-center text-sm text-slate-500">
              <view class="fa fa-map-marker mr-1.5" />保险箱
            </view>
          </view>
        </view>
        <view class="flex items-center border rounded-xl bg-white p-3 shadow-sm space-x-3">
          <wd-img src="https://picsum.photos/seed/keys/80/80" alt="item" class="h-16 w-16 rounded-lg object-cover" />
          <view class="flex-1">
            <view class="font-bold">
              备用钥匙
            </view>
            <view class="flex items-center text-sm text-slate-500">
              <view class="fa fa-map-marker mr-1.5" />玄关抽屉
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
